<template>
  <div class="wrap" ref="wrap" :style="{ backgroundColor:bgColor}">
    <div class="header">
      <div class="logo">
        <a href="#">
          <img src="/img/logo.png" alt="南昌地铁" />
        </a>
      </div>
      <nav>
        <div class="msg">
          <a href="#">
            <div class="info">
              <div>运行信息</div>
              <p>运行正常</p>
            </div>
          </a>
        </div>
        <ul>
          <li class="language">
            <a
              href="#"
              @click="dispalySubMenu(1)"
              @mousemove="changeMoveBgc(1)"
              @mouseleave="changeLeaveBgc(1)"
              ref="language"
            >
              <div class="en_img">
                <img :src="lPath" alt />
              </div>
              <span :style="{color:textColor}">中文(简体)</span>
            </a>
            <div class="languagePanel" v-if="isLDisplay">
              <div class="subMenu">
                <ul>
                  <li v-for="(item,index) in language" :key="index">
                    <a
                      :class="{cur:item == '中文(简体)'}"
                      href="#"
                      @click.stop="addCur"
                      ref="aitem"
                    >{{item}}</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="query">
            <a
              href="#"
              @click="dispalySubMenu(2)"
              @mousemove="changeMoveBgc(2)"
              @mouseleave="changeLeaveBgc(2)"
              ref="search"
            >
              <div class="query_img">
                <img :src="sPath" alt />
              </div>
              <span :style="{color:textColor}">查询</span>
            </a>
            <div class="searchPanel" v-if="isSDisplay">
              <div class="search">
                <form action="#">
                  <input type="text" placeholder="查询" autocomplete="true" class="search_input" />
                  <input type="submit" class="searchSubmit" value />
                  <div>
                    <fieldset class="serach_title">
                      <legend>搜索范围</legend>
                      <ul class="ul_search">
                        <li v-for="(item, index) in searchContext" :key="index">
                          <input
                            type="checkbox"
                            name="checkbox"
                            value="item"
                            :id="'checkBox'+index"
                          />
                          <label :for="'checkBox'+index">{{item}}</label>
                        </li>
                      </ul>
                    </fieldset>
                  </div>
                </form>
              </div>
            </div>
          </li>
          <li class="menu">
            <a
              href="#"
              @click="dispalySubMenu(3)"
              @mousemove="changeMoveBgc(3)"
              @mouseleave="changeLeaveBgc(3)"
              ref="menu"
            >
              <div class="menu_img">
                <img :src="mPath" alt />
              </div>
              <span :style="{color:textColor}">Menu</span>
            </a>
            <div class="menuPanel" v-if="isMDisplay">
              <div class="menus">
                <div v-for="(item, index) in $store.state.ncMenu" :key="index" class="menuItem">
                  <a href="#">
                    <div class="mi_icon">
                      <img :src="item.path" alt />
                    </div>
                    <p class="desc">{{item.desc}}</p>
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
import store from "../../store";
export default {
  name: "mHeader",
  store,
  data() {
    return {
      bgColor: "",
      textColor: "white",
      isLDisplay: false,
      isSDisplay: false,
      isMDisplay: false,
      language: [
        "English",
        "한국어",
        "中文(简体)",
        "中文(繁體)",
        "ภาษาไทย",
        "Français",
        "Español"
      ],
      lPath: "/img/header/icon_header_english_white.png",
      sPath: "/img/header/icon_header_search_white.png",
      mPath: "/img/header/icon_header_menu_white.png",
      searchContext: [
        "整个网站",
        "南昌Metro地铁乘坐小贴士",
        "路线/站点信息",
        "运行路线图",
        "车票",
        "乘坐南昌地铁游览南昌",
        "主题"
      ]
    };
  },
  props: {
    scrollTop: Number
  },
  created() {
    if (this.scrollTop == undefined) {
      this.lPath = "/img/header/icon_header_english.png";
      this.sPath = "/img/header/icon_header_search.png";
      this.mPath = "/img/header/icon_header_menu.png";
      this.textColor = "";
      this.bgColor = "#fff";
    }
  },
  mounted() {
    document.addEventListener("click", this.handleDocumentClick);
    document.addEventListener("touchstart", this.handleDocumentClick);
  },
  methods: {
    //重置
    handleDocumentClick(e) {
      if (!this.$el.contains(e.target)) {
        this.isLDisplay = false;
        this.isSDisplay = false;
        this.isMDisplay = false;
        this.$refs.menu.className = "";
        this.$refs.search.className = "";
        this.$refs.language.className = "";
        if (this.scrollTop == 0) {
          this.lPath = "/img/header/icon_header_english_white.png";
          this.sPath = "/img/header/icon_header_search_white.png";
          this.mPath = "/img/header/icon_header_menu_white.png";
          this.textColor = "white";
        } else {
          this.lPath = "/img/header/icon_header_english.png";
          this.sPath = "/img/header/icon_header_search.png";
          this.mPath = "/img/header/icon_header_menu.png";
          this.textColor = "";
        }
      }
    },

    dispalySubMenu(i) {
      switch (i) {
        case 1:
          this.isLDisplay = !this.isLDisplay;
          if (this.isLDisplay) {
            this.isSDisplay = false;
            this.isMDisplay = false;
            this.lPath = "/img/header/icon_header_close.png";
            this.$refs.language.className = "a_cur";
            this.$refs.menu.className = "";
            this.$refs.search.className = "";
            this.sPath = "/img/header/icon_header_search.png";
            this.mPath = "/img/header/icon_header_menu.png";
          } else {
            this.$refs.language.className = "";
            this.lPath = "/img/header/icon_header_english_white.png";
          }
          break;
        case 2:
          this.isSDisplay = !this.isSDisplay;
          if (this.isSDisplay) {
            this.isMDisplay = false;
            this.isLDisplay = false;
            this.sPath = "/img/header/icon_header_close.png";
            this.$refs.search.className = "a_cur";
            this.$refs.menu.className = "";
            this.$refs.language.className = "";
            this.lPath = "/img/header/icon_header_english.png";
            this.mPath = "/img/header/icon_header_menu.png";
          } else {
            this.$refs.search.className = "";
            this.sPath = "/img/header/icon_header_search_white.png";
          }
          break;
        case 3:
          this.isMDisplay = !this.isMDisplay;
          if (this.isMDisplay) {
            this.isSDisplay = false;
            this.isLDisplay = false;
            this.mPath = "/img/header/icon_header_close.png";
            this.$refs.menu.className = "a_cur";
            this.$refs.language.className = "";
            this.$refs.search.className = "";
            this.lPath = "/img/header/icon_header_english.png";
            this.sPath = "/img/header/icon_header_search.png";
          } else {
            this.$refs.menu.className = "";
            this.mPath = "/img/header/icon_header_menu_white.png";
          }
          break;
      }
    },
    addCur(e) {
      for (let i = 0; i < this.$refs.aitem.length; i++) {
        this.$refs.aitem[i].className = "";
      }
      e.target.className = "cur";
    },
    changeMoveBgc(i) {
      if (this.scrollTop == 0) {
        this.bgColor = "#fff";
        this.textColor = "";
        if (i == 1) {
          if (!this.isSDisplay && !this.isMDisplay) {
            this.sPath = "/img/header/icon_header_search.png";
            this.mPath = "/img/header/icon_header_menu.png";
          }
        }
        if (i == 2) {
          if (!this.isLDisplay && !this.isMDisplay) {
            this.lPath = "/img/header/icon_header_english.png";
            this.mPath = "/img/header/icon_header_menu.png";
          }
        }
        if (i == 3) {
          if (!this.isSDisplay && !this.isLDisplay) {
            this.sPath = "/img/header/icon_header_search.png";
            this.lPath = "/img/header/icon_header_english.png";
          }
        }
      } else {
        if (i == 1) {
          if (!this.isLDisplay) {
            this.lPath = "/img/header/icon_header_english_white.png";
          }
        }
        if (i == 2) {
          if (!this.isSDisplay) {
            this.sPath = "/img/header/icon_header_search_white.png";
          }
        }
        if (i == 3) {
          if (!this.isMDisplay) {
            this.mPath = "/img/header/icon_header_menu_white.png";
          }
        }
      }
    },
    changeLeaveBgc(i) {
      if (this.scrollTop == 0) {
        this.bgColor = "";
        this.textColor = "white";
        if (i == 1) {
          if (!this.isSDisplay && !this.isMDisplay) {
            this.sPath = "/img/header/icon_header_search_white.png";
            this.mPath = "/img/header/icon_header_menu_white.png";
          }
        }
        if (i == 2) {
          if (!this.isLDisplay && !this.isMDisplay) {
            this.lPath = "/img/header/icon_header_english_white.png";
            this.mPath = "/img/header/icon_header_menu_white.png";
          }
        }
        if (i == 3) {
          if (!this.isSDisplay && !this.isLDisplay) {
            this.sPath = "/img/header/icon_header_search_white.png";
            this.lPath = "/img/header/icon_header_english_white.png";
          }
        }
      } else {
        if (i == 1) {
          if (!this.isLDisplay) {
            this.lPath = "/img/header/icon_header_english.png";
          }
        }
        if (i == 2) {
          if (!this.isSDisplay) {
            this.sPath = "/img/header/icon_header_search.png";
          }
        }
        if (i == 3) {
          if (!this.isMDisplay) {
            this.mPath = "/img/header/icon_header_menu.png";
          }
        }
      }
    }
  },
  watch: {
    scrollTop(newV, oldV) {
      if (newV == 0) {
        this.bgColor = "";
        this.textColor = "white";
        if (!this.isLDisplay) {
          this.lPath = "/img/header/icon_header_english_white.png";
        }
        if (!this.isSDisplay) {
          this.sPath = "/img/header/icon_header_search_white.png";
        }
        if (!this.isMDisplay) {
          this.mPath = "img/header/icon_header_menu_white.png";
        }
      } else {
        this.bgColor = "#fff";
        this.textColor = "";
        if (!this.isLDisplay) {
          this.lPath = "/img/header/icon_header_english.png";
        }
        if (!this.isSDisplay) {
          this.sPath = "/img/header/icon_header_search.png";
        }
        if (!this.isMDisplay) {
          this.mPath = "/img/header/icon_header_menu.png";
        }
      }
    }
  }
};
</script>

<style scoped>
@import "../../assets/css/common.css";
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20%;
  margin: 0 auto;
  z-index: 5;
  padding-bottom: 10px;
  transition: background 0.3s linear;
}
.white {
  background-color: #fff;
}
.header {
  width: 100%;
  display: flex;
  padding-top: 20px;
}
.logo {
  flex-grow: 2;
  margin-right: 5px;
}
.logo img {
  transform: translateY(50%);
  width: 120px;
  height: 30px;
}
nav {
  display: flex;
}
.info {
  padding-top: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
nav .msg > a {
  color: #00467e;
  background-color: #e1e4e7;
  height: 60px;
  width: 175px;
  font-size: 1rem;
  border-radius: 5px;
}

nav .msg > a > div {
  font-size: 10px;
}
nav .msg > a > p {
  font-size: 12px;
}
nav .msg > a:hover {
  border: 1px solid rgba(66, 85, 148);
}
nav > ul {
  display: flex;
}
nav > ul > li:not(.menu) {
  margin-left: 15px;
  position: relative;
}
nav > ul > li.menu {
  margin-left: 15px;
}
nav span {
  font-size: 12px;
}

.menu_img,
.en_img,
.query_img {
  width: 100%;
  text-align: center;
}
nav > ul > li img {
  width: 24px;
  height: 24px;
  padding: 9px 0 5px;
  display: block;
  margin-left: 18px;
}

nav > ul > li > a {
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 6px;
  position: relative;
  z-index: 30;
}
nav > ul > li > a:hover {
  background-color: #00476e;
  color: #fff;
}
nav > ul > li > div {
  position: absolute;
  background-color: #edf6f9;
  border-radius: 10px;
}
.a_cur {
  background-color: #00476e;
  color: #fff;
}
.languagePanel {
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
  width: 170px;
}
.subMenu {
  position: relative;
}
.subMenu::after {
  content: "";
  position: absolute;
  display: block;
  background: url("/img/header/icon_header_tri.png") no-repeat;
  background-size: 23px auto;
  width: 23px;
  height: 16px;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}
.subMenu > ul > li > a {
  display: block;
  font-size: 1rem;
  color: #333;
  border-top: 1px solid #e2e2e2;
  padding: 12px 45px;
  text-align: center;
}
.subMenu > ul > li > a:hover {
  text-decoration: underline;
  background-color: #c5d7dd;
  color: #00467e;
}
.subMenu > ul > li > a.cur {
  background: #00467e url("/img/header/icon_header_check.png") no-repeat 15px
    15px;
  background-size: 19px auto;
  color: #fff;
  font-weight: bold;
}
.subMenu > ul > li:first-of-type > a {
  margin-top: 15px;
}

.searchPanel {
  position: absolute;
  width: 910px;
  left: auto;
  top: 75px;
  right: 0px;
  text-align: center;
  box-shadow: 0px 0px 12px 0px #bababa;
  box-sizing: border-box;
  margin-left: 0;
}
.search {
  width: 100%;
  position: relative;
}

.search::after {
  content: "";
  position: absolute;
  display: block;
  background: url("/img/header/icon_header_tri.png") no-repeat;
  background-size: 23px auto;
  width: 23px;
  height: 16px;
  top: -16px;
  left: 98%;
  transform: translateX(-98%);
}

.ul_search {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
.ul_search > li {
  text-align: left;
  width: 30%;
  height: 50px;
}
.ul_search > li:nth-of-type(2),
.ul_search > li:nth-of-type(5) {
  flex-grow: 1.5;
}
.search input {
  outline: none;
}
.search_input {
  margin-top: 30px;
  width: 80%;
  height: 54px;
  border-radius: 30px;
  padding: 0 20px;
  font-size: 1.6rem;
  border: 1px solid #9bafb5;
  background: #fff;
  box-sizing: border-box;
}
.search_input:hover {
  border: 2px solid #00a3d9;
}
.search input[type="submit"] {
  position: absolute;
  background: url("/img/header/icon_header_search.png") no-repeat;
  width: 40px;
  height: 40px;
  background-size: 33px auto;
  cursor: pointer;
  right: 100px;
  top: 40px;
  left: auto;
  border: none;
}
.search label {
  cursor: pointer;
  width: 100%;
}
.search input[type="checkbox"] {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #c5d7dd;
  transform: translateY(5px);
}
fieldset {
  outline: none;
  border: none;
  margin-top: 40px;
}
fieldset > legend {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  color: #333;
  margin-bottom: 24px;
}
div.menuPanel {
  position: absolute;
  top: 95px;
  left: 0;
  width: 100%;
  background-color: #edf6f9;
  box-shadow: 0px 0px 12px 0px #bababa;
  border-radius: 0;
  justify-content: center;
}
div.menus {
  display: flex;
  margin: 40px auto;
  width: 70%;
  padding: 0 15%;
}
.menuItem:first-of-type::after {
  content: "";
  position: absolute;
  display: block;
  background: url("/img/header/icon_header_tri.png") no-repeat;
  background-size: 23px auto;
  width: 23px;
  height: 16px;
  top: -14px;
  left: 78.5%;
  transform: translateX(-78.5%);
}
.menus > .menuItem {
  width: 50%;
  box-sizing: border-box;
  text-align: center;
}
.menuItem > a {
  display: inline-block;
  width: 120px;
}
.menuItem > a:hover .desc {
  text-decoration: underline;
}

nav > ul > li.menu .mi_icon > img {
  margin: 0;
  width: 120px;
  height: 120px;
}
.desc {
  width: 120px;
  font-size: 1.1rem;
  font-weight: bold;
  padding-top: 15px;
  color: #00467e;
  text-align: center;
}
.desc::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  background: url("/img/icon_arrow_blue.png") no-repeat;
  background-size: 7px auto;
  margin-right: 7px;
}
</style>